<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单结算页-大麦网</title>
    <link rel="shortcut icon" href="../../static/damai/image/label.ico" th:href="@{/damai/image/label.ico}" type="image/x-icon">
    <link rel="stylesheet" href="../../static/damai/css/orderConfirm.css" th:href="@{/damai/css/orderConfirm.css}">
    <link rel="stylesheet" href="../../static/damai/css/orderConfirm1.css" th:href="@{/damai/css/orderConfirm1.css}">
    <link rel="stylesheet" href="../../static/damai/css/orderConfirm2.css" th:href="@{/damai/css/orderConfirm2.css}">
    <link rel="stylesheet" href="../../static/damai/css/orderConfirm3.css" th:href="@{/damai/css/orderConfirm3.css}">

</head>
<body>

<!--页面顶部start-->
<div class="top-s">
    <div class="top-con">
        <ul class="fl">
            <li class="mini-logo">
                <a href="../index.html" title="大麦网">
                    <img src="../../static/damai/image/user/orderConfirm/mini-logo.png"
                    th:src="@{/damai/image/user/orderConfirm/mini-logo.png}" alt="大麦网">
                </a>
            </li>
            <li id="headerUserinfo" class="dm-info">
                <span th:if="${session.user ne null}" class="dm-name" th:text="'HI，'+${session.user.nickName}">HI , 星语o</span>
                <a class="dm-exit" title="退出" th:href="@{/user/logout}">退出</a>
            </li>
            <!--<li class="mydm o">-->
                <!--<div class="dm-t mydm-t"><a href="javascript:void(0)" target="_blank">我的大麦</a><b></b>-->
                <!--</div>-->
                <!--<div class="dm-c mydm-c"><a href="javascript:void(0)" target="_blank"-->
                                            <!--title="个人信息">个人信息</a><a href="javascript:void(0)"-->
                                                                    <!--target="_blank" title="订单管理">订单管理</a><a-->
                        <!--href="javascript:void(0)" target="_blank" title="我的优惠券">我的优惠券</a>-->
                <!--</div>-->
            <!--</li>-->
        </ul>
    </div>
</div>
<!--页面顶部end-->

<!--主体区域start-->
<div class="g-doc" >
    <div class="g-hd"></div>
    <div class="g-bd">
        <div class="m-panel m-panel-default">
            <img src="../../static/damai/image/user/orderConfirm/shopping_two_flow.jpg"
                th:src="@{/damai/image/user/orderConfirm/shopping_two_flow.jpg}">
            <div class="hd">
                <h2 class="tt">购票人信息</h2>
            </div>
            <div class="bd"><!-- delivery start -->
                <div class="m-tab m-delivery m-delivery-1">
                    <div class="hd" data-selectrealname="tab">
                        <!--ms-if-->
                        <div class="itm z-crt">
                            <i class="ico ico-codeticket"></i><span class="txt">二维码电子票</span></div><!--ms-if-->
                        <!--ms-if-->
                    </div>
                    <div class="bd">
                        <!--ms-if-->
                        <div class="itm z-show">
                            <!-- express start -->
                            <div class="m-panel m-panel-gray">
                                <div class="hd">
                                    <div class="lbox">
                                        <h2 class="tt">二维码电子票</h2>
                                    </div>
                                </div>
                                <div class="bd">
                                    <form id="deliveryFormId_4" style="margin:0;padding:0;" novalidate="novalidate"
                                          th:action="@{/order/confirmOrder}" th:method="post">
                                        <div class="m-form">
                                            <div class="itm">
                                                <label class="lab">用户姓名：</label>
                                                <div class="ipt">
                                                    <input class="u-ipt u-ipt-md" placeholder="请输入姓名" name="linkUserName">
                                                    <span id="nameMsg" style="color: red"></span>
                                                </div>
                                            </div>
                                            <div class="itm"><label class="lab">手机号码：</label>
                                                <div class="ipt">
                                                    <input class="u-ipt u-ipt-md" placeholder="请输入手机号码" name="phone">
                                                    <span id="phoneMsg" style="color: red"></span>
                                                </div>
                                            </div>
                                            <div class="itm new-tips"><label class="lab">温馨提示：</label>
                                                <ul class="lab-s">
                                                    <li>下单完成后请下载大麦APP进入票夹查看电子票及使用说明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <input type="submit" id="deliverySubmitBtn_4" style="display: none;"
                                               autocomplete="off">
                                    </form>
                                </div>
                            </div>
                            <!-- express end -->
                        </div>
                        <!--ms-if-->
                        <!--ms-if-->
                    </div>
                </div>
                <!-- delivery end -->
            </div>
        </div>
        <!--实名制 start-->
        <!--实名制 end-->
        <!-- select pay method start -->
        <div class="m-panel m-panel-default">
            <div class="hd"><h2 class="tt">选择付款方式</h2></div>
            <div class="bd">
                <div class="m-form" id="paymethod">
                    <div class="itm itm-2">
                        <label class="u-radio">
                            <input type="radio" value="1" ms-duplex="@submit_data.payment" name="paymethod" checked="checked" avalon-events="click:_6">
                            <span class="txt">网上付款</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <!-- select pay method end -->
        <div class="m-panel m-panel-default">
            <div class="hd"><h2 class="tt">商品清单</h2></div><!--ms-for:el in @details-->
            <div ms-for="el in @details"><!--(非一票一证)普通座位展示start-->
                <div class="m-table-5" ms-if="el.licenseType == 0 || el.licenseType == 1">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <th scope="col" class="w1">商品名称</th>
                            <th scope="col" class="w2">座位号</th>
                            <th scope="col" class="w3">价格</th>
                            <th scope="col" class="w4">数量</th>
                            <th scope="col" class="w5">价格小计（元）</th>
                        </tr>
                        </tbody>
                    </table><!--非选座信息展示start--><!--ms-for:el2 in el.subCommodityList-->
                    <table ms-for="el2 in el.subCommodityList" ms-if="@commodity_data.businessSubType != '1'"
                           width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody>
                        <tr>
                            <td class="w1">
                                <p>
                                    <a target="_blank" href="javascript:void(0)" th:text="${orderDTO.item.itemName}">
                                    子曰秋野 2019北京主题演唱会
                                    </a><span th:text="${#dates.format(orderDTO.scheduler.startTime,'yyyy-MM-dd HH:mm')}">2019-03-02 周六 20:00</span>
                                </p>
                            </td>
                            <td class="w2">
                                <p th:text="${orderDTO.schedulerSeat.status eq 0}? '无座'
                                            : ('观众席' +( ${orderDTO.schedulerSeat.areaLevel eq 1}? '一层'
                                            : (${orderDTO.schedulerSeat.areaLevel eq 2}? '二层'
                                            : (${orderDTO.schedulerSeat.areaLevel eq 3}? '三层'))))
                                            + ${orderDTO.schedulerSeat.y} + '排' + ${orderDTO.schedulerSeat.x} + '号'">暂无座位信息</p>
                                <p></p>
                            </td>
                            <td class="w3"><p th:text="${orderDTO.schedulerSeatPrice.price}">180.00</p></td>
                            <td class="w4"><p th:text="${orderDTO.totalCount}">1</p></td>
                            <td class="w5"><p th:text="${orderDTO.totalAmount}">180.00</p></td>
                        </tr>
                        </tbody>
                    </table><!--for20047000000013213--><!--ms-for-end:--><!--非选座信息展示end--><!--选座信息展示start-->
                    <!--ms-for:el2 in el.subCommodityList--><!--ms-if--><!--for20052000000014232--><!--ms-for-end:-->
                    <table style="width: 100%;">
                        <tbody>
                        <tr>
                            <td><span class="new-hb" th:text="'合计：¥' + ${orderDTO.totalAmount}">合计：¥ 180.00</span>
                                <a href="javascript:void(0);" class="new-link">《退换货约定》</a>
                            </td>
                        </tr>
                        </tbody>
                    </table><!--选座信息展示end--><!-- ms-if="el2.isCombo == 1 && el2.quantity == 1" --></div>
                <!--(非一票一证)普通座位展示end--><!--(一票一证)选座信息展示start--><!--ms-if--><!--ms-if--><!--ms-if-->
                <!--(一票一证)立即购买信息展示start--><!--ms-if--><!-- ms-if="el2.isCombo == 1 && el2.quantity >= 2" --><!--ms-if-->
                <!--ms-if-->
            </div>
            <!--for1878500000000713--><!--ms-for-end:-->
        </div>
        <!--(一票一证)立即购买信息展示end-->
        <div class="m-panel m-panel-default privileges"
             ms-visible="@isPrivilege(@submit_data.sendCityId, 0) &amp;&amp; @submit_data.temp.isPrivileges">
            <!--<div class="hd"><h2 class="tt">选择订单优惠</h2></div>-->
            <div class="bd" data-role="tabpanel">
                <!-- select coupon start -->
                <!-- select coupon end -->
            </div>
        </div>
        <!-- select pay method start -->
        <div class="m-panel m-panel-default">
            <!--<div class="hd"><h2 class="tt">我要开发票</h2></div>-->
            <div class="bd">
                <div class="m-discount">
                    <div class="hd">
                        <!-- choose discount method start -->

                        <!-- choose discount method end -->
                    </div>
                    <div class="bd"><!--ms-if--><!--ms-if--><!--ms-if-->
                        <div class="row">
                            <p class="txt">商品金额：
                                <span class="cell" th:text="'¥' + ${orderDTO.totalAmount}">¥ 180.00</span>
                            </p>
                        </div>
                        <!--ms-if-->
                        <!--ms-if--><!--ms-if--></div>
                    <div class="ft">
                        <div class="row">
                            <p class="txt txt-total">待支付总额：
                                <span class="txt-danger" th:text="'¥' + ${orderDTO.totalAmount}">¥ 180.00</span>
                            </p>
                        </div>
                        <div class="row"><label class="u-checkbox">
                            <input id="checkTxt" type="checkbox" checked="checked">
                            <span class="txt">
                                我已阅读并同意
                                <a href="javascript:void(0)" target="_blank" class="txt-primary">《大麦网订票服务条款》</a>
                            </span>
                        </label></div>
                        <div class="row"><p class="txt">同意“票品为不记名凭证，请您妥善保管，遗失不补”</p></div>
                        <div class="row">
                            <button id="orderConfirmSubmit" class="c_submit u-btn u-btn-c2 u-btn-rds u-btn-lg z-dis1">
                                同意以上协议并提交订单
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- select pay method end -->
        <!--验证码弹窗 begin wjm-->
        <!--验证码弹窗 end-->
        <!--验证码同盾弹窗 begin wjm-->
        <!--验证码同盾弹窗 end-->
        <!-- loding 弹层 start -->
        <!-- loding 弹层 end -->
        <!--发票配送地址 begin wjm-->
        <!--发票配送地址 end-->
        <!--新增配送地址 begin wjm-->
        <!--新增配送地址 end-->
        <!--实名认证 begin wjm-->
        <!--实名认证 end-->
        <!--(一票一证选座购票人) begin wjm-->
        <!--(一票一证选座购票人) end-->
        <!--(一票一证立即购买购票人) begin wjm-->
        <!--(一票一证立即购买购票人) end-->
        <!--一票一证确认弹层 begin wjm-->
        <!--一票一证确认弹层 end-->
        <!--修改配送地址 begin wjm-->
        <!--修改配送地址 end-->
        <!-- 添加购票人loading层 -->
        <!-- 添加购票人loading层 -->
        <!-- alert弹层 -->
        <!-- alert层 -->
        <!-- 新增购票人弹层 -->
        <!-- 新增购票人层 -->
    </div>
</div>
<!--主体区域end-->


<!--底部信息start-->
<div class="dm-bottom-wrap">
    <div class="dm-bottom">
        <div class="dm-links"><a href="javascript:void(0)" target="_blank">公司介绍</a>
            |
            <a href="javascript:void(0)" target="_blank">品牌识别</a>
            |
            <a href="javascript:void(0)" target="_blank">企业荣誉</a>
            |
            <a href="javascript:void(0)" target="_blank">联系方式</a>
            |
            <a href="javascript:void(0)" target="_blank">隐私声明</a>
            |
            <a href="javascript:void(0)" target="_blank">合作招商</a>
            |
            <a href="javascript:void(0)" target="_blank">招聘信息</a>
            |
            <a href="javascript:void(0)" target="_blank">网站地图</a>
            |
            <a href="javascript:void(0)" target="_blank">友情链接</a></div>
        <div class="dm-copyright"><p><a href="javascript:void(0)" target="_blank">京ICP证031057号</a><span>|</span><a
                href="javascript:void(0)" target="_blank">京ICP备11043884号</a><span>|</span><a
                href="javascript:void(0)" target="_blank"><img
                src="../../static/damai/image/detail/police.png"
                th:src="@{/damai/image/detail/police.png}" class="vm">
            京公网安备11010102000430号
        </a><span>|</span><a href="javascript:void(0)" target="_blank">广播电视节目制作经营许可证
            (京)字第02253号</a></p>
            <p><a href="javascript:void(0)" target="_blank">网络文化经营许可证
                京网文[2016]3438-413号</a><span>|</span><a href="javascript:void(0)"
                                                       target="_blank">营业性演出许可证 京市演587号</a></p>
            <p>
                北京红马传媒文化发展有限公司 版权所有
                <a href="../login.html">大麦网</a>
                Copyright 2003-2016 All Rights Reserved
            </p></div>
    </div>
</div>
<!--底部信息end-->


<input type="hidden" th:value="${saleOver}" name="saleOver">

<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script>
    $(function () {

        var saleMsg = $('input[name=saleOver]').val();
        if(saleMsg == 'over'){
            alert('该活动票已售完,敬请期待下次活动');
            window.location = '/';
        }


        $('input[name=linkUserName]').blur(function () {
            var linkUserName = $(this).val();
            isName(linkUserName);
        });

        $('input[name=phone]').blur(function () {
            var phone = $(this).val();
            isPhoneNo(phone);
        });

        $('#orderConfirmSubmit').click(function () {
            if($('#checkTxt').is(':checked')){
                var linkUserName = $('input[name=linkUserName]').val();
                var phone = $('input[name=phone]').val();
                if(isName(linkUserName) && isPhoneNo(phone)){
                    $('#deliveryFormId_4').submit();
                }

            }else {
                alert('请勾选"我已阅读并同意"');
            }
        })

    });

    // 非空判断==============================================
    function isNull(data) {
        if(data === null || data === undefined || data === ''){
            return true;
        }else {
            return false;
        }
    }

    function isPhoneNo(data) {
        var pattern = /^1[34578]\d{9}$/;
        if(isNull(data)){
            $('#phoneMsg').html('号码不能为空');
            return false;
        }else if(!pattern.test(data)){
            $('#phoneMsg').html('号码格式不正确');
            return false;
        }else {
            $('#phoneMsg').html('');
            return true;
        }

    }

    function isName(data) {
        var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
        if(isNull(data)){
            $('#nameMsg').html('姓名不能为空');
            return false;
        }else if(!pattern.test(data)){
            $('#nameMsg').html('姓名格式不正确');
            return false;
        }else {
            $('#nameMsg').html('');
            return true;
        }
    }
</script>
</body>
</html>